<template>
	<view class="min-h-[100vh]">
		<view class="flex bg-white z-50 items-center text-second text-[32rpx] px-[32rpx] h-[88rpx] w-[100%] shadow sticky top-0">附近</view>
		<view class="p-[32rpx]">
			<view class="flex px-[24rpx] h-[60rpx] items-center bg-white rounded-full shadowX flex-1">
				<up-icon name="search" color="#999" size="20"></up-icon>
				<input class="leading-[1] text-[24rpx]" type="text" v-model="listParams.searchKey" placeholder="输入门店名称或地址搜索" @blur="resetList" />
			</view>
		</view>
		<view class="">
			<view
				class="p-[32rpx] bg-white"
				:class="{
					'!bg-[#FDF8F5]': item.id === currentShop.id
				}"
				v-for="item in shopList"
				:key="item.id"
				@click="chooseShop(item)"
			>
				<view class="text-[30rpx] flex items-center justify-between">
					<view class="flex items-center">
						<view class="mr-[12rpx]">{{ item.name }}</view>
						<view v-if="item.id === currentShop.id" class="text-[18rpx] text-white px-[10rpx] bg-second rounded-full rounded-bl-none">当前选择</view>
					</view>
					<view class="flex items-center text-[24rpx]">
						<up-icon name="map" size="28rpx"></up-icon>
						<view class="">距您{{ Number(item.distance).toFixed(2) }}m</view>
					</view>
				</view>
				<view class="text-[24rpx] text-[#999] mt-[8rpx]">门店地址：{{ item.address }}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import useShop from '@/hooks/useShop';
onLoad(async () => {
	await getCurrentShop();
	await resetList();
});
onReachBottom(() => {
	if (shopList.value.length < listParams.total) {
		listParams.pageNum += 1;
		getShopList();
	}
});
const { getShopList, shopList, listParams, resetList, chooseShop, currentShop, getCurrentShop } = useShop();
</script>

<style scoped lang="scss">
.shadow {
	box-shadow: 0rpx 4rpx 8rpx 2rpx rgba(0, 0, 0, 0.04);
}
.shadowX {
	box-shadow: 0rpx 0rpx 8rpx 2rpx rgba(161, 84, 36, 0.16);
}
</style>
